<template>
  <div>
    <Header/>

    <div class="login-content">
      <div class="login-flex">
        <div class="login-left">
          <h3>加入动力金融网</h3>
          <p>坐享
            <AvgRate/>
            历史年化收益
          </p>
          <p>平台用户
            <UserCount/>
          </p>
          <p>累计成交金额
            <BidMoney/>
          </p>
        </div>
        <!---->
        <div class="login-box">
          <h3 class="login-title">
            <a href="javascript:;" :class="{active: pwdLogin}" @click="changeLoginType(true)">密码登录</a>
            |
            <a href="javascript:;" :class="{active: !pwdLogin}" @click="changeLoginType(false)">短信登录</a>
          </h3>

          <!-- autocomplete="off"关闭历史输入提示 -->
          <form v-if="pwdLogin" autocomplete="off">
            <div class="alert-input">
              <input type="text" class="form-border user-num" v-model="phone" name="mobile" placeholder="请输入11位手机号">
              <p class="prompt_num"></p>
              <input type="password" @keydown.13="loginForPwd" placeholder="请输入登录密码" v-model="pwd"
                     class="form-border user-pass" autocomplete name="password">
              <p class="prompt_pass"></p>
            </div>
            <div class="alert-input-btn">
              <input type="button" class="login-submit" value="登录" @click="loginForPwd">
            </div>
          </form>

          <form v-else>
            <div class="alert-input">
              <input type="text" class="form-border user-num" name="mobile" placeholder="请输入11位手机号">
              <p class="prompt_num"></p>
              <div class="form-yzm form-border">
                <input class="yzm-write" type="text" placeholder="输入短信验证码">
                <input class="yzm-send" type="text" value="获取验证码" disabled="disabled" id="yzmBtn" readonly="readonly">
              </div>
              <p class="prompt_yan"></p>
            </div>
            <div class="alert-input-btn">
              <input type="submit" class="login-submit" value="登录">
            </div>
          </form>

        </div>

      </div>
    </div>

    <Footer/>
  </div>
</template>

<script>
import Vue from "vue";
import qs from "qs";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AvgRate from "@/components/AvgRate";
import UserCount from "@/components/UserCount";
import BidMoney from "@/components/BidMoney";

export default {
  name: "Login",
  data() {
    return {
      pwdLogin: true,
      phone: '',
      pwd: ''
    }
  },
  methods: {
    changeLoginType(pwdLogin) {
      this.pwdLogin = pwdLogin;
    },
    loginForPwd() {
      let data = {
        phone: this.phone,
        pwd: this.pwd
      }
      // {a:1, b:2} ==> "a=1&b=2"
      data = qs.stringify(data);
      Vue.axios.post("/user/loginForPwd", data).then(({data}) => {
        console.log(data);
        if (data.success) {
          /*
            sessionStorage为本地存储对象，浏览器关闭之后，该对象中的数据将清除
            localStorage也是本地存储对象，永久存储！

            他们都包含3个常用方法：
            sessionStorage.setItem(key, StringValue)
            sessionStorage.getItem(key)
            sessionStorage.removeItem(key)

            注意：该对象只能存储字符串，如果将对象直接存入，则实际存入的值为[object Object]
            如果希望存入对象，先调用JSON.stringify(object)将对象转换为json字符串，获取时
            需要调用JSON.parse(str) 将取出来的字符串解析为对象
           */
          sessionStorage.setItem("token", data.token);
          //sessionStorage.setItem("loginUser", data.loginUser); // 错误，实际存入的值为[object Object]
          // {a:1, b:2} ==> '{"a":1, "b":2}'
          let loginUser = JSON.stringify(data.loginUser);
          sessionStorage.setItem("loginUser", loginUser); // 错误，实际存入的值为[object Object]

          // 如果已经实名认证，则跳转到首页，否则跳转到实名认证页面
          if (data.loginUser.name && data.loginUser.idCard) {
            this.$router.push("/index")
          } else {
            alert("登录成功，您还没有实名认证，点击确定去认证！");
            this.$router.push("/realName")
          }
        }
        if (data.msg) {
          alert(data.msg);
        }
      })
    }
  },
  components: {BidMoney, UserCount, AvgRate, Footer, Header}
}
</script>

<style scoped>
.active {
  color: #4fa5d9;
}
</style>